<template>
  <div class="" v-if="!isMobile">
    <el-card v-if="contentView">
      <el-row>
        <el-col :span="12">
          <el-col :span="4" style="margin-right: 10px">
            <!--<Searchmodule :placeholder="placeholder" @seacherKey="seacher"></Searchmodule>-->

            <el-select size="medium" clearable v-model="queryInfo.importType" filterable placeholder="导入的文件类型">
              <el-option v-for="item in importTypes" :key="item.code" :label="item.name" :value="item.code">
              </el-option>
            </el-select>

          </el-col>
          <el-col :span="4" style="margin-right: 10px">
            <el-input size="medium"
                      placeholder="文件名"
                      v-model="queryInfo.originFileName"
                      clearable>
            </el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
          </el-col>

        </el-col>
        <el-col :span="12" style="text-align: right;">
          <div>
            <!--<el-button    type="primary" icon="el-icon-plus" @click="operationView(0)">添加</el-button>-->
          </div>
        </el-col>
      </el-row>
      <!--表格-->
      <el-table :row-style="{height: '10px'}" :cell-style="{padding:'0px'}" :data="tableData" border
                v-loading="loading">
        <!--  <el-table-column type="index" label="序号" v-if="false" align="center" width="50">
          </el-table-column> -->
        <el-table-column label="业务类型" prop="approvalName" align="center" width="150">
        </el-table-column>

        <el-table-column  label="文件名" align="center"  :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.originFileName">{{scope.row.originFileName}}</span>
            <span v-else>/</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="上传时间" align="center" width="150">
        </el-table-column>

        <el-table-column prop="creatorName" label="创建人" align="center" width="100">
        </el-table-column>
        <el-table-column prop="lastOpinion" label="审批意见" align="center" />
        <el-table-column label="审核状态" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status.code == 3" @click="history(scope.row)" style="color: #1c9913;cursor: pointer;">{{scope.row.status.name}}</span>
            <span v-else-if="scope.row.status.code==2" @click="history(scope.row)"
                  style="color: #ffb547;cursor: pointer;">{{scope.row.status.name}}</span>
            <span v-else style="color: #ff4141;cursor: pointer;" @click="history(scope.row)">{{scope.row.status.name}}
              <span v-if="scope.row.lastResult!=null">({{scope.row.lastResult}})</span>
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="optBtn-box">
              <el-button v-if="scope.row.fileName!=null" type="text" icon="el-icon-edit" @click="downFileImport(scope.row.fileName)">下载文件</el-button>
              <el-button type="text" :loading="scope.row.loading" icon="el-icon-delete"
                         @click="operationView(2, scope.row)">删除
              </el-button>
              <el-button v-if="scope.row.status.code == 2" type="text" icon="el-icon-edit" @click="withdraw(scope.row)">
                撤回
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: center;" :disabled="loading" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[25,50]" :page-size="queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <submitForm v-else :subData="subData" @closeView="closeView" @refresh="refreshTable"></submitForm>
    <historyLook :visible.sync="visible" :historyTables="historyTables" :isMobile="isMobile"/>
  </div>


  <!-- 手机 -->
  <div class="mobile-box" v-else>
   <el-row class="mobile-seacher-box">
     <el-select size="medium" clearable v-model="queryInfo.importType" filterable placeholder="导入的文件类型">
       <el-option v-for="item in importTypes" :key="item.code" :label="item.name" :value="item.code">
       </el-option>
     </el-select>
   </el-row>
    <el-row class="mobile-seacher-box">
        <el-col :span="18" style="margin-right: 10px">
          <el-input size="medium"
                    placeholder="文件名"
                    v-model="queryInfo.originFileName"
                    clearable>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
        </el-col>
    </el-row>
    <ul v-if="tableData.length" v-loading="loading">
      <li class="ist-item" v-for="item in tableData" :key="item.id">
        <el-card>
          <el-col :span="24" >
            <div class="title">业务类型：{{item.approvalName}}</div>
          </el-col>
          <el-col :span="24" v-if="item.documentTable === 'import_approval_apply'">
            <div class="title"  @click="downFileImport(item.fileName)">文件名：{{ item.originFileName }}</div>
          </el-col>
          <el-col :span="24">
            <div class="title">上传时间：{{ item.createTime }}</div>
          </el-col>
          <el-col :span="24">
            <div class="title">创建人：{{ item.creatorName }}</div>
          </el-col>
          <el-col :span="24">
            <div class="title" v-if="item.lastOpinion">审批意见：{{ item.lastOpinion }}</div>
            <div v-else>暂无</div>
          </el-col>
          <el-col :span="24">
            <div class="title">
              审核状态：
              <span v-if="item.status.code == 3" style="color: #1c9913;" @click="history(item)">{{ item.status.name }}</span>
              <span v-else-if="item.status.code == 2" style="color: #ffb547;" @click="history(item)">{{ item.status.name }}</span>
              <span v-else style="color: #ff4141;" @click="history(item)">{{ item.status.name }}
              <span v-if="item.lastResult!=null">({{item.lastResult}})</span>
              </span>
            </div>
          </el-col>
          <el-col :span="24" class="btn-box " >
            <el-button type="primary" size="mini" @click="operationView(2,item)">删除</el-button>
            <el-button type="primary" size="mini" @click="withdraw(item)">撤回</el-button>
            <!--<el-button v-if="scope.row.fileName!=null"-->
                       <!--type="primary" size="mini" icon="el-icon-edit" @click="downFileImport(scope.row.fileName)">查看</el-button>-->
            <el-button v-if="item.documentTable === 'import_approval_apply'" type="primary" size="mini" @click="downFileImport(item.fileName)">查看</el-button>
          </el-col>
        </el-card>
      </li>
      <el-pagination
        v-if="total>=queryInfo.pageSize"
        style="text-align: center; width: 90%; overflow: auto"
        :disabled="loading"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo"
        :page-sizes="[25, 50]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <historyLook :visible.sync="visible" :historyTables="historyTables" :isMobile="isMobile" />
    </ul>
    <div v-if="!tableData.length" class="no-data">
      <img :src="require('../../assets/noData.jpg')"/>
    </div>
  </div>
</template>

<script>
import { pageApplyImport, deleteImport, downloadFileByName, allImportType } from '@/api/importApply.js'
import { mapState } from 'vuex'
import submitForm from './addImportApproval/addImportApproval.vue'
import historyLook from '@/components/historyLook'
import { getHistoryLook, postWithdraw } from '@/api/user'

let $this = null
export default {
  name: 'purchase',
  components: {
    submitForm,
    historyLook
  },
  computed: {
    ...mapState(['authList'])
  },
  data () {
    return {
      contentView: true,
      placeholder: '类别名称',
      loading: false,
      queryInfo: {
        pageNo: 1,
        pageSize: 25
      },
      importTypes: [],
      tableData: [],
      total: 0,
      subData: {
        btnId: '',
        id: ''
      },
      visible: false,
      historyTables: [],
      isMobile: false,
      noMore: false
    }
  },
  created () {
    $this = this
    if ($this.$utils.isMobile()) {
      $this.isMobile = true
    }
    $this.getPageSupplier()
    allImportType().then(res => {
      this.importTypes = res.data.data && res.data.data
    })
  },
  methods: {
    withdraw (row) {
      this.$loading()
      postWithdraw({ documentId: row.id }).then(res => {
        this.$loading().close()
        const { data } = res
        if (data.code == '200') {
          this.getPageSupplier()
          this.$message.success(data.message)
        } else {
          this.$message.error(data.message)
        }
      })
    },
    history (row) {
      getHistoryLook(row.processInstanceId).then(res => {
        this.historyTables = res.data.data
        this.visible = true
      })
    },
    authFilter (code) {
      let flag = false
      if (this.authList.length) {
        this.authList.forEach(item => {
          if (item.resourceCode == code) {
            flag = true
          }
        })
      }
      return flag
    },
    getPageSupplier () {
      $this.loading = true
      pageApplyImport($this.queryInfo).then(res => {
        $this.loading = false
        $this.tableData = res.data.data.records
        $this.total = res.data.data.total
      }).catch(err => {
        $this.loading = false
        return $this.$message.error(err.message)
      })
    },
    handleCurrentChange (val) {
      $this.queryInfo.pageNo = val
      $this.getPageSupplier()
    },
    handleSizeChange (size) {
      $this.queryInfo.pageSize = size
      $this.getPageSupplier()
    },
    seacher (key) {
      $this.getPageSupplier()
    },
    downFileImport (fileName) {
      downloadFileByName(fileName).then(res => {
        if (res.data.code != 200) {
          return $this.$message.error(res.data.message)
        }
        window.open(res.data.data)
      })
    },
    operationView (btnId, row) {
      if (btnId === 0) {
        $this.subData.btnId = btnId
        $this.contentView = false
      } else if (btnId === 1) {
        $this.subData.btnId = btnId
        $this.subData.id = row.id
        $this.contentView = false
      } else if (btnId === 2) {
        $this.$set(row, 'loading', true)
        $this.deleteDict(row)
      } else {
        return $this.$message.error('操作错误')
      }
    },
    // 删除
    deleteDict (row) {
      deleteImport(row.id).then(res => {
        $this.$set(row, 'loading', false)
        $this.getPageSupplier()
        if (res.data.success) {
          return $this.$message.success('删除成功')
        } else {
          return $this.$message.error(res.data.message)
        }
      }).catch(err => {
        $this.$set(row, 'loading', false)
        return $this.$message.error('操作错误')
      })
    },
    // 返回table
    closeView () {
      $this.contentView = true
    },
    refreshTable () {
      $this.getPageSupplier()
      $this.contentView = true
    }
  }
}
</script>
<style scoped lang="scss">
  @mixin box-width {
    width: 90%;
    margin: 10px auto;
  }

  .mobile-box {
    position: relative;
    .mobile-seacher-box,
    .btn-data {
      @include box-width;
    }
    ul {
      padding: 0;
      & > li {
        @include box-width;
        list-style-type: none;
        .btn-box {
          text-align: right;
          margin-bottom: 10px;
        }
        .el-col{
          margin: 10px 0;
        }
      }
    }
    .no-data {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 400px;
      }
    }
    .btnBox {
      padding: 10px;
      text-align: center;

    }
  }
</style>
